<template>
<div>
    <el-carousel trigger="click" :interval="3000" :height="carouselHeight()">
      <el-carousel-item v-for="(item, i) of sliderBanner" :key="i">
          <div class="card" v-for="(key, k) of item" :key="k">
              <router-link :to="{path:`/pc/scienceAticle?article_id=${key.aid}`}" >
                  <div class="img" :style="{'background-image':`url(${key.url})`}"></div>
              </router-link>
              <router-link class="a" :to="{path:`/pc/scienceAticle?article_id=${key.aid}`}">{{key.title}}</router-link>
              <div class="introduction">{{key.introduce}}</div>
          </div>
      </el-carousel-item>
    </el-carousel>  
</div>
</template>
<style scoped> 
  .el-carousel__item{
      display: flex;
      justify-content: space-around;
      align-items: center;
  }
  .card{
      height: 70%;
      width: 30%;
      background: #f5f6f5;
      opacity: 0.86;
      overflow: hidden;
  }
  .card:hover {
    opacity: 1;
  }
  
  /**********************************重写轮播样式************************ */
  /* 指示器样式 */
.el-carousel /deep/ .el-carousel__button {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #3587d8;
}
.el-carousel /deep/ .el-carousel__indicators {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100px;
}

/* 箭头样式 */
.el-carousel /deep/ .el-carousel__arrow{
     /* display: block !important; */
     border-radius: 0%;
     background: transparent;
     color: #459df5;
}
.el-carousel /deep/ .el-icon-arrow-left,
.el-carousel /deep/ .el-icon-arrow-right {
  font-size: 50px;
  background: transparent;
}
/* 左右箭头的位置 */
.el-carousel /deep/ .el-carousel__arrow--left {
  left: -10px;
}
.el-carousel /deep/ .el-carousel__arrow--right {
  right: 0px;
}
  /****************************************End*************************** */

  .a {
      display: block;
      color: #333;
      line-height: 18px;
      font-size: 18px;
      font-weight: 700;
      margin-left: 4%;
      margin-top: 2%;
      text-decoration: none;
  }
  .a:hover {
     color: #338de6;
  }
  .img {
    display: block;
    height: 65%;
    background-size: cover;
    box-sizing: border-box;
  }
  .introduction {
    /* border: 1px solid red; */
    overflow: hidden;
    height: 17%;
    margin-top: 2%;
    padding: 2%;
    font-size: 12px;
    color: #888;
  }
  @media screen and (max-width: 1286px){
    .introduction {
      height: 19%;
    }
  }
</style>
<script>
export default {
  props: {
    bodyWidth: {
      type: Number,
      default: 0
    },
    sliderBanner: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      
    }
  },
  methods: {
    carouselHeight(part = 3.84) {
        //屏幕的宽和容器的高比列为3.84
        return `${this.bodyWidth/part}px`
    }
  },
  mounted() {
   
  }
}
</script>